<template>
  <el-card>
    <el-table :data="data" border>
      <el-table-column v-for="tableItem in filteredSchema" v-bind="tableItem">
        <template v-if="tableItem.slot === 'operator'" #header>
          <el-popover
            placement="bottom"
            :width="100"
            trigger="click"
            v-model:visible="visible"
          >
            <template #reference>
              <div @click="showColumns">
                操作
                <el-icon :size="14">
                  <ArrowUp v-if="isShowColumns" />
                  <ArrowDown v-else />
                </el-icon>
              </div>
            </template>

            <el-checkbox-group v-model="checkedColumns">
              <draggable
                v-model="dragSchema"
                item-key="key"
                v-bind="{
                  animation: 250,
                  group: 'people',
                  disabled: false,
                  ghostClass: 'ghost',
                }"
              >
                <template #item="{ element }">
                  <el-checkbox :label="element.key" :key="element.key">
                    {{ element.label }}
                  </el-checkbox>
                </template>
              </draggable>
            </el-checkbox-group>
            <div style="display: flex; justify-content: flex-end">
              <el-button type="primary" size="small" @click="confirm"
                >确定</el-button
              >
              <el-button size="small" @click="cancel">取消</el-button>
            </div>
          </el-popover>
        </template>
        <template v-slot="scoped">
          <slot v-if="tableItem.slot" :name="tableItem.slot" v-bind="scoped" />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      layout="prev, pager, next, jumper, ->, sizes, total"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "XTable",
});

const props = defineProps<{
  getData: Function;
  schema: any[];
}>();

import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { ref, onMounted, watch, computed } from "vue";

const currentPage = ref(1);
const pageSize = ref(10);
const pageSizes = ref([10, 20, 30, 40]);
const total = ref(1000);
const data = ref([]);

const getData = async () => {
  const res = await props.getData();
  data.value = res.list;
  total.value = res.total;
};

onMounted(getData);

watch([currentPage, pageSize], getData);

const isShowColumns = ref(false);
const showColumns = () => {
  isShowColumns.value = !isShowColumns.value;
};

const visible = ref(false);

// 正在操作选中的列
const checkedColumns = ref(props.schema.map((item) => item.key));
// 确定后选中的列
const confirmCheckedColumns = ref(props.schema.map((item) => item.key));
const confirm = () => {
  confirmCheckedColumns.value = checkedColumns.value;
  visible.value = false;
  showSchema.value = dragSchema.value;
};
const cancel = () => {
  checkedColumns.value = confirmCheckedColumns.value;
  visible.value = false;
  dragSchema.value = showSchema.value;
};

const filteredSchema = computed(() => {
  // schema 所有schema，从中过滤掉不在 checkedColumns 中
  return showSchema.value.filter((item) =>
    confirmCheckedColumns.value.includes(item.key)
  );
});

import draggable from "vuedraggable";
const dragSchema = ref(props.schema);
const showSchema = ref(props.schema);
</script>

<style scoped>
.icon {
  font-size: 12px;
}
</style>
